var question11 = new Array("1", "5", "9", "13", "17", "21", "25", "29", "33", "37");
var question44 = new Array("4", "8", "12", "16", "20", "24", "28", "32", "36", "40");

var question1 = new Array("7", "35", "23", "31", "27");
var question2 = new Array("2", "14", "19", "30", "34");
var question3 = new Array("6", "10", "22", "26", "38");
var question4 = new Array("11", "15", "18", "39", "3");

var resultquestion = new Array(
"236710111415181922232627303134353839"
);

$(function() {
    var lii = '';
    var li11 = '';
    var li44 = '';
    $.each(question1, function(key, val) {        
        lii += '<li id="'+val+'" class="'+key+'"><img src="images/'+val+'.jpg" /></li>';
    });
    $.each(question2, function(key, val) {        
        lii += '<li id="'+val+'" class="'+key+'"><img src="images/'+val+'.jpg" /></li>';
    });
    $.each(question3, function(key, val) {        
        lii += '<li id="'+val+'" class="'+key+'"><img src="images/'+val+'.jpg" /></li>';
    });
    $.each(question4, function(key, val) {        
        lii += '<li id="'+val+'" class="'+key+'"><img src="images/'+val+'.jpg" /></li>';
    });

    $.each(question11, function(key, val) {
        li11 += '<li id="'+val+'" class="'+key+'"><img src="images/'+val+'.jpg" /></li>';
    });
    
    $.each(question44, function(key, val) {
        li44 += '<li id="'+val+'" class="'+key+'"><img src="images/'+val+'.jpg" /></li>';
    });

    $('#sortable1').append(li11);
    $('#sortable2').append(lii);
    $('#sortable3').append(li44);

    $('#sortable2 li').livequery('click', function() {
        $this = $(this);
        // remove css of image not click
        $('#sortable2 li img').css({
            'filter':'alpha(opacity=100)',  
            'opacity':'1'
        });
        // add alpha for image click
        $this.children("img").css({
            'filter':'alpha(opacity=60)',  
            'opacity':'0.6'
        });  
        // get image clicked
        var click_one = $('#NumberChoose').html();        
        
        if (click_one != '-1') {
            // mark default
            $('#NumberChoose').html('-1');
            // remove css of image not click
            $('#sortable2 li img').css({
                'filter':'alpha(opacity=100)',  
                'opacity':'1'
            });
            // swap
            var divCO = '#'+click_one;
            $this.swap(divCO);
        } else {
            // mark id click
            $('#NumberChoose').html($this.attr('id'));            
        }
    });

    $('#submit').click(function() {
        var result = '';
        $('#sortable2').children().each(function(){
                var kid = $(this);
                result += (kid.attr('id'));               
        });        
        if (jQuery.inArray(result, resultquestion) != -1) {
            $('.dialogNoteS').dialog({
                modal: true,
                buttons: {
                            Ok: function() {
                                location.replace('../susscess.html');
                            }
			}
            });
        } else {
            $('.dialogNoteE').dialog({
                modal: true,
                buttons: {
                            Ok: function() {                                
                                $( this ).dialog( "close" );
                            }
			}
            });
        }
    });
    $('#clickexampleshow').click(function () {
        $('#example').show();
    });
    $('#clickexamplehide').click(function () {
        $('#example').hide();
    });
});